<template>
  <view class="new_main">
    <view class="top_recharge">
      <view class="topInput_title">充值积分</view>
      <view class="topInput" v-if="platform != 'ios'">
        <text class="symbol">￥</text>
        <input
          class="input"
          v-model="payNum"
          v-if="activeIndex === ''"
          type="text"
          :focus="activeIndex === ''"
          placeholder=""
          maxlength="6"
        />
        <text
          v-else
          class="perch_txt"
          @click="
            activeIndex = '';
            payNum = '';
            ID = '';
          "
          >手动输入充值金额</text
        >
        <view class="recharge_num" v-if="activeIndex === ''"
          >{{ payNum * 100 }}积分</view
        >
      </view>
    </view>
    <view class="topUp_list flex_between flex_wrap">
      <view
        class="topUp_item flex_column flex_center_align"
        :class="activeIndex === index ? 'on' : ''"
        v-for="(item, index) in topUpList"
        :key="index"
        @click="clickMenu(item, index)"
      >
        <view class="topUp_money">
          <text class="topUp_icon">￥</text>
          <text class="money">{{ item.name }}</text>
        </view>
        <text class="gain">{{ item.amount * 100 }}积分</text>
        <view class="index index1" v-if="index == 0">加赠{{ item.extra }}</view>
        <view class="index index2" v-if="index == 1">加赠{{ item.extra }}</view>
        <view class="index index3" v-if="index == 2">加赠{{ item.extra }}</view>
      </view>
    </view>

    <view class="line" v-if="platform != 'ios'"></view>

    <view class="pay" v-if="platform != 'ios'">
      <view class="pay_title">支付方式</view>
      <view class="pay-list">
        <view
          class="pay-item"
          v-for="(item, index) in payList"
          :key="index"
          @click="changePay(item)"
          :class="{ active: payCurrent == item.id }"
        >
          <view class="name_new flex_align">
            <text
              class="iconfont"
              :class="item.icon"
              :style="{ color: item.iconColor }"
            ></text>
            <text class="name">{{ item.name }}</text>
          </view>
          <text
            class="check iconfont"
            :class="
              payCurrent == item.id ? 'iconchoosehandle' : 'iconweigouxuan'
            "
          ></text>
        </view>
      </view>
    </view>
    <view v-if="platform != 'ios'" class="topUp_btn flex_center_align" @click="payMoney">
      立即充值
    </view>
    <view v-else class="topUp_btn flex_center_align" @click="payClick">
      立即充值
    </view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pointsMall/recharge/index"
></script>

<style lang="less" scoped>
@import url(@/static/css/iconfont.css);

.new_main {
  position: relative;
  height: 100vh;
  background-color: #fff;
  overflow: hidden;

  .topUp_list {
    margin-top: 60rpx;
    padding: 0 45rpx;

    .topUp_item {
      position: relative;
      margin-top: 30rpx;
      width: 310rpx;
      height: 172rpx;
      background: #f0f0f0;
      border-radius: 15rpx;

      &:last-child {
        margin-top: 60rpx;
      }

      &.on {
        background: #fff4eb;
        border: 1px solid #ff8315;

        .topUp_money {
          color: #fa853c;
        }
      }

      .gain {
        font-size: 26rpx;
        margin-top: 20rpx;
      }

      .topUp_money {
        color: #fa853c;
        font-weight: 600;

        .topUp_icon {
          font-size: 26rpx;
        }

        .money {
          font-size: 45rpx;
        }
      }

      .rlist-linp {
        width: 105rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-bottom: 1px solid #696969;
      }

      .index {
        position: absolute;
        top: -21rpx;
        left: 0;
        width: 135rpx;
        height: 42rpx;
        background: linear-gradient(90deg, #ffb12a 0%, #ff890b 100%);
        border-radius: 15rpx 0rpx 15rpx 0rpx;
        font-size: 28rpx;
        text-align: center;
        color: #ffffff;
        line-height: 40rpx;
      }
    }
  }

  .topUp_btn {
    width: 680rpx;
    position: fixed;
    bottom: 32rpx;
    left: 35rpx;
    height: 90rpx;
    background: #ff982a;
    border-radius: 45rpx;
    font-size: 30rpx;
    color: #ffffff;
  }
}

.top_recharge {
  padding: 0 45rpx;
}

.topInput_title {
  padding-top: 53rpx;
  font-size: 36rpx;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 600;
  color: #333333;
  line-height: 40rpx;
}

.topInput {
  margin-top: 28rpx;
  width: 680rpx;
  height: 90rpx;
  background: #f3f3f3;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  position: relative;

  .symbol {
    padding-left: 50rpx;
    font-size: 30rpx;
    color: #000;
    font-weight: bold;
  }

  .input {
    width: 100%;
    padding-left: 20rpx;
  }

  .perch_txt {
    padding-left: 20rpx;
    width: 100%;
    font-size: 30rpx;
  }

  .recharge_num {
    position: absolute;
    bottom: -60rpx;
    right: 0rpx;
    font-size: 30rpx;
    font-size: 30rpx;
    color: #ff6161;
    line-height: 40rpx;
  }
}

.line {
  margin: 47rpx -32rpx 72rpx 0;
  width: 100vw;
  height: 18rpx;
  background: #f6f6f6;
}

.pay {
  padding: 0 50rpx;
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;

  .pay-list {
    margin-top: 38rpx;
    font-size: 28prx;

    .pay-item {
      padding: 33rpx 0rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name_new {
        font-weight: normal;

        .iconfont {
          font-size: 50rpx;
          margin-right: 12rpx;
        }
      }

      .check {
        color: #999;
        font-size: 36rpx;

        &.iconchoosehandle {
          color: rgb(66, 145, 255);
        }
      }
    }
  }
}
</style>
